import {Component, OnInit} from '@angular/core';
import {NzMessageService, NzModalService} from "ng-zorro-antd";
import {ActivityService} from "../activity.service";
import {AliyunOssOutputUrl} from "../../../../config/api";
import {Router} from "@angular/router";


@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  providers: [ActivityService]
})
export class ListComponent implements OnInit {

  aliyunOssOutputUrl = AliyunOssOutputUrl;
  isCollapsed = false;
  typeOpen = true;
  sliderWidth = 180;
  total = 0;
  loading = false;
  pageSize = 10;
  page = 1;
  name = '';
  status = '';
  keyword = '';
  activityList = [
    {
      id: 1,
      title: '嘻嘻嘻',
      cover: '',
      checked: false
    },
    {
      id: 2,
      title: '嘻嘻嘻1',
      cover: '',
      checked: false
    },
    {
      id: 3,
      title: '嘻嘻嘻2',
      cover: '',
      checked: false
    },
  ];
  checkedIds = [];
  _allChecked = false;
  _indeterminate = false;
  qrcodeVisible = false;
  activeQrcodeUrl = '';
  _isSpinning = false;
  flag = true;
  editIndex = null;


  constructor(private confirmServ: NzModalService,
              private activityService: ActivityService,
              private _message: NzMessageService,
              private router: Router
  ) {
  }

  ngOnInit() {
    this.getActivityList();
  }

  getActivityList() {
    this.loading = true;
    this.activityService.getActivityList(this.page, this.pageSize, this.keyword).subscribe(res => {
      if (res.code === 200) {
        this.activityList = res.data;
        this.total = res.data.total;
        this.loading = false;
        this.activityList.map((e, i) => {
          e['cover_url'] = e['cover_url'] + '?update=' + Date.now();
        })
      }
    })
  }

  checkedSingele(e, id) {
    if (e) {
      this.checkedIds.push(id);
    } else {
      this.checkedIds.every((val, idx, array) => {
        if (id === val) {
          this.checkedIds.splice(idx, 1);
          return false;
        }
        return true;
      });
      this.activityList.every((val, idx, array) => {
        if (id === val.id) {
          val.checked = false;
          return false;
        }
        return true;
      })
    }
    this._refreshStatus();
  }


  _checkAll(value) {
    if (value) {
      this.activityList.forEach(item => {
        if (!item.checked) {
          item.checked = true;
          this.checkedIds.push(item.id);
        }
      });
    } else {
      this.activityList.forEach(item => {
        if (item.checked) {
          item.checked = false;
          this.checkedIds.every((val, idx, array) => {
            if (item.id === val) {
              this.checkedIds.splice(idx, 1);
              return false;
            }
            return true;
          });
        }
      });
    }
    this._refreshStatus();
  };

  _refreshStatus() {
    const allChecked = this.activityList.every(value => value.checked === true);
    const allUnChecked = this.activityList.every(value => !value.checked);
    this._allChecked = allChecked;
    this._indeterminate = (!allChecked) && (!allUnChecked);
  };

  toggleCollapsed(value) {
    this.isCollapsed = value;
    if (!this.isCollapsed) {
      this.typeOpen = true;
    }
  }


  showDeleteConfirm = (id) => {
    let self = this;
    this.confirmServ.confirm({
      title: '温馨提示',
      content: '<b>您确定要删除吗</b>',
      onOk() {
        self.activityService.delActivityPlan(id).subscribe(res => {
          if (res.code === 2000) {
            self._message.create('success', '删除成功');
            self.page = 1;
            self.getActivityList();
          } else {
            self._message.create('error', res.message);
          }
        })
      },
      onCancel() {
      }
    });
  };

  goAddPage() {
    if (this.flag) {
      this.router.navigate(['member/activity/add']);
      this.flag = false;
    }
  }

  goEditPage(id) {
    if (this.flag) {
      this.router.navigate(['member/activity/edit/' + id]);
      this.flag = false;
    }
  }


  showQrcodeModal = (i, id) => {
    this.editIndex = i;
    this.qrcodeVisible = true;
    if(this.activityList[i]['qrcode_url']) {
      return;
    }
    this._isSpinning = true;
    this.activityService.getQrcode(id).subscribe(res => {
      if (res.code === 1) {
        this.activityList[i]['qrcode_url'] = res.data;
        this._isSpinning = false;
      }
    })
  };

  handleOk = (e) => {
    this.qrcodeVisible = false;
  };

  handleCancel = (e) => {
    this.qrcodeVisible = false;
  };

}
